<template>
  <div>
    <!--    <div class="table-page-search-wrapper">-->
    <!--      <a-form-model :model="queryParam" layout="inline">-->
    <!--        <a-row :gutter="48">-->
    <!--          <a-col :md="6" :sm="24">-->
    <!--            <a-form-model-item label="通讯账号">-->
    <!--              <a-select-->
    <!--                v-model="queryParam['filter[adviser_nanfang_accounts]']"-->
    <!--                placeholder="选择通讯账号"-->
    <!--              >-->
    <!--                <a-select-option v-for="(item,index) in accountOpts" :key="item" :value="item">{{index}}</a-select-option>-->
    <!--              </a-select>-->
    <!--            </a-form-model-item>-->
    <!--          </a-col>-->
    <!--          <a-col :md="6" :sm="24">-->
    <!--            <a-form-model-item label="通话时长">-->
    <!--              <a-select v-model="queryParam['filter[nanfang_section]']" placeholder="选择对应的通时区间">-->
    <!--                <a-select-option v-for="(item,index) in sectionOpts" :key="index" :value="index">{{item}}</a-select-option>-->
    <!--              </a-select>-->
    <!--            </a-form-model-item>-->
    <!--          </a-col>-->
    <!--          <a-col :md="6" :sm="24">-->
    <!--            <a-form-model-item label="通话时间">-->
    <!--              <a-date-picker style="width: 100%" v-model="queryParam['filter[api_call_time]']" @change="onChange" />-->
    <!--            </a-form-model-item>-->
    <!--          </a-col>-->
    <!--          <a-col :md="6" :sm="24">-->
    <!--            <a-button type="primary" @click="$refs.table.refresh(true)" style="margin-right:10px;">查询</a-button>-->
    <!--            <a-button type="default" @click="resetSearch">重置</a-button>-->
    <!--          </a-col>-->
    <!--        </a-row>-->
    <!--      </a-form-model>-->
    <!--    </div>-->
    <s-table
      bordered
      ref="table"
      :row-class-name="(record) => { if (record.is_read === 0) return 'table-color-dust' }"
      :row-key="(record) => record.id"
      :columns="callColumns"
      :data="nfData"
    >
      <div
        slot="filterDropdown"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
        style="padding: 8px"
      >
        <a-input
          v-ant-ref="c => (searchInput = c)"
          :placeholder="`搜索${column.title}`"
          :value="selectedKeys[0]"
          style="width: 188px; margin-bottom: 8px; display: block;"
          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
          @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
        />
        <a-button
          type="primary"
          icon="search"
          size="small"
          style="width: 90px; margin-right: 8px"
          @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
        >
          搜索
        </a-button>
        <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
          重置
        </a-button>
      </div>
      <div
        slot="filterSelect"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
        style="padding: 8px"
      >
        <a-select
          show-search
          style="width: 188px; margin-bottom: 8px; display: block;"
          :placeholder="`选择${column.title}`"
          :value="selectedKeys[0]"
          :filter-option="filterOption"
          @change="(value) => setSelectedKeys(value ? [value] : [])"
          @pressEnter="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
        >
          <a-select-option v-for="(item,index) in accountOpts" :key="item" :value="item">{{index}}</a-select-option>
        </a-select>
        <a-button
          type="primary"
          icon="search"
          size="small"
          style="width: 90px; margin-right: 8px"
          @click="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
        >
          搜索
        </a-button>
        <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
          重置
        </a-button>
      </div>
      <div
        slot="filterRange"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
        style="padding: 8px"
      >
        <a-range-picker
          style="width: 228px; margin-bottom: 8px; display: block;"
          :value="createValue"
          @change="onChange0"
          @pressEnter="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
        />
        <a-button
          type="primary"
          icon="search"
          size="small"
          style="width: 110px; margin-right: 8px"
          @click="() => handleRange(selectedKeys, confirm, column.dataIndex)"
        >
          搜索
        </a-button>
        <a-button size="small" style="width: 110px" @click="() => rangeReset(clearFilters)">
          重置
        </a-button>
      </div>
      <template slot="url" slot-scope="text, record">
        <audio v-if="record.duration != 0" :src="text" @play="onPlay(record)" controls :style="{ height: '20px', lineHeight: '20px' }">
          您的浏览器不支持 audio 标签
        </audio>
        <div v-else>
          -
        </div>
        <!--        <audio :src="text" controls></audio>-->
      </template>
      <template slot="sign" slot-scope="text,record">
        <a-tag v-if="record.sign == 0">正常</a-tag>
        <a-tag color="red" v-else-if="record.sign == 1">异常</a-tag>
        <a-tag color="blue" v-else>优秀</a-tag>
      </template>
      <template slot="action" slot-scope="text,record">
        <a-badge :dot="record.is_read == 0">
          <a-button :disabled="record.is_read == 0" size="small" type="primary" @click="onSign(record.id)">操作</a-button>
        </a-badge>
      </template>
      <template slot="title">
        <div :style="{ overflow: 'hidden' }">
          <div :style="{ float: 'left' }">
            搜索结果总通时：<a-tag color="red">{{(totalZts/60).toFixed(2)}}</a-tag>分钟
          </div>
          <div :style="{ float: 'right' }">
            <a-button size="small" type="primary" @click="onExport">导出</a-button>
          </div>
        </div>
      </template>
    </s-table>
    <a-modal
      title="录音记录"
      v-model="visible"
      :footer="null"
    >
      <a-form-model
        ref="form"
        :model="signForm"
        :rules="signRules"
      >
        <a-form-model-item label="问题" prop="question">
          <a-input type="text" v-model="signForm.question" placeholder="输入问题是什么" />
        </a-form-model-item>
        <a-form-model-item label="解决方案" prop="proposal">
          <a-textarea :rows="5" v-model="signForm.proposal" placeholder="给出解决方案及建议"></a-textarea>
        </a-form-model-item>
        <a-form-model-item>
          <div :style="{ textAlign: 'right' }">
            <a-button type="danger" style="margin-right:10px" @click="signGood">优秀</a-button>
            <a-button type="primary" @click="onSubmit">提交</a-button>
          </div>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
  import { STable } from '@/components'
  import apis from '@/api'
  import col from '@/columns/calls'
  // import { getExtend, getNanfang, getSign, postExtend, postSign } from '@/api/calls'
  import { getCallList, getExtend, setIsRead, signBad } from '@/api/calls'

  export default {
    components: {
      STable
    },
    name: 'SubNanFang',
    data () {
      return {
        callColumns: col.nanfang,
        nfData: parameters => {
          return getCallList(Object.assign(parameters, this.queryParam)).then(res => {
            this.totalZts = res.result.nanfangSearchZts
            this.accountOpts = res.result.nanfang_account
            this.sectionOpts = res.result.nanfang_section
            return res.result
          })
        },
        accountOpts: {},
        sectionOpts: {},
        queryParam: {},
        info: {},
        currentId: '',
        visible: false,
        signOpts: {},
        typeOpts: {},
        signForm: {
          question: '',
          proposal: ''
        },
        signRules: {
          question: [{ required: true, message: '请输入问题是什么', trigger: true }],
          proposal: [{ required: true, message: '请输入解决方案', trigger: true }]
        },
        totalZts: 0,
        createValue: []
      }
    },
    created () {
      this.queryParam['filter[type]'] = '2'
    },
    methods: {
      onPlay (obj) {
        if (obj.is_read === 0) {
          setIsRead(obj.id, this.queryParam['filter[type]']).then(res => {
            if (res.status === 0) {
              this.$refs.table.refresh()
            }
          })
        }
      },
      onChange (date, dateString) {
        this.queryParam['filter[api_call_time]'] = dateString
      },
      onChange0 (date, dateString) {
        this.createValue = date
        this.queryParam['filter[begin_created_at]'] = dateString[0]
        this.queryParam['filter[end_created_at]'] = dateString[1]
      },
      filterOption (input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      },
      resetSearch () {
        this.queryParam = {}
        this.queryParam['filter[type]'] = '2'
        this.$refs.table.refresh(true)
      },
      onSign (id) {
        const app = this
        app.currentId = id
        getExtend(app.currentId, app.queryParam['filter[type]']).then(res => {
          app.signForm.question = res.result.question
          app.signForm.proposal = res.result.proposal
          app.visible = true
        })
      },
      handleSearch (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
      },
      handleReset (clearFilters, dataIndex) {
        clearFilters()
        delete this.queryParam['filter[' + dataIndex + ']']
      },
      handleSelect (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
      },
      handleRange (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.$refs.table.refresh(true)
      },
      rangeReset (clearFilters) {
        clearFilters()
        this.createValue = []
        delete this.queryParam['filter[begin_created_at]']
        delete this.queryParam['filter[end_created_at]']
        this.$refs.table.refresh(true)
      },
      onSubmit () {
        const app = this
        app.$refs.form.validate(valid => {
          if (valid) {
            const form = {}
            for (const k in app.signForm) {
              form['info[' + k + ']'] = app.signForm[k]
            }
            signBad(app.currentId, app.queryParam['filter[type]'], 'wt', form).then(res => {
              if (res.status === 0) {
                app.visible = false
                app.$refs.table.refresh()
              } else {
                app.$warning({
                  title: res.msg
                })
              }
            })
          } else {
            return false
          }
        })
      },
      signGood () {
        const app = this
        this.$confirm({
          title: '是否确认此条设为优秀录音',
          onOk: () => {
            signBad(app.currentId, app.queryParam['filter[type]'], 'yx').then(res => {
              if (res.status === 0) {
                app.visible = false
                app.$refs.table.refresh()
              } else {
                app.$warning({
                  title: res.msg
                })
              }
            })
          }
        })
      },
      onExport () {
        const baseUrl = process.env.VUE_APP_API_BASE_URL + apis.ExportVoice
        const exp = baseUrl + '?filter[type]=' + this.queryParam['filter[type]'] + '&filter[api_call_time]=' + this.queryParam['filter[api_call_time]']
        window.open(exp)
      }
    }
  }
</script>

<style>
  .ant-table-tbody > tr.table-color-dust {
    background-color: #ffcccc;
  }
</style>
